<template>
    <div class="form">
        <el-form label-width="auto" :rules="formRules" ref="formRef" :model="ownerInformation">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ownerInformation.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="编号" prop="number">
                <el-input v-model="ownerInformation.number" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="楼栋id" prop="id">
                <el-input v-model="ownerInformation.id" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="创建员工" prop="createEmployees">
                <el-input v-model="ownerInformation.createEmployees" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item class="button" >
            <el-button type="info" @click ="cancel">取消</el-button>
            <el-button type="primary" @click="save(formRef)">确定</el-button>
      </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import http from '../utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
let router = useRouter()
import { onBeforeMount, ref } from 'vue'
import BuildInformation from './BuildInformation.vue';
let formRef = ref(null)
  //定义规则
let formRules = ref({
    id: [
        { required: true, message: '请输入id', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    number: [
        { required: true, message: '请输入序号', trigger: 'blur' }
    ],
    createEmployees: [
        { required: true, message: '请输入创建人', trigger: 'blur' }
    ]
})
let ownerInformation = ref({
    id: router.currentRoute.value.query.id,
    name: '',
    number:'',
    createEmployees: ''
})
onBeforeMount(async()=>{
    if(ownerInformation.value.id){
        let resp = await http.get(`/build/selectById/${ownerInformation.value.id}`)
        ownerInformation.value = resp.data
    }
})
async function save(formRef){
    debugger
    formRef.validate(async function(valid){
        if (valid) {
            let tip = ownerInformation.value.id ? '修改' : '保存'
            let resp = await http.post('/build/addOrUpdate',ownerInformation.value)
            if(resp.code == 200){
                ElMessageBox.alert(tip+'成功', tip+'业主', {
                    confirmButtonText: 'OK'
                })
                router.go(-1)
            }else{
            }
        }
        else{ 
            callback()
        }
    })
}
function cancel(){
    router.go(-1)
}

</script>

<style lang="css" scoped>
.form {
    width:400px;
    position: relative;
    right: -200px;
}
.el-form-item__label {
    width: 120px;
}
.type {
    width:400px;
}
.type1 {
    position: relative;
    right: -200px;
}
.pattern {
    position: relative;
    right: -650px;
    top: -100px;
}
.button {
    position: relative;
}
</style>